<template>
  <div class="change-password">
    <div class="info-content">
      <!-- 头部展示 -->
      <div class="info-top-title">
        <div>
          <span class="myInfo">修改密码</span
          ><span class="english"> Change Password</span>
          <span class="asd"></span>
        </div>
      </div>
      <!-- 我的信息展示 -->
      <div class="show-user-info">
        <div class="form-group">
          <div class="group-name animate__animated animate__fadeInLeft">旧密码</div>
          <div class="group-input animate__animated animate__fadeInRight">
            <el-input
              style="width: 500px"
              placeholder="请输入内容"
              v-model="oldPassword"
              show-password
            >
            </el-input>
          </div>
        </div>
        <div class="form-group">
          <div class="group-name animate__animated animate__fadeInLeft">新密码</div>
          <div class="group-input animate__animated animate__fadeInRight">
            <el-input
              style="width: 500px"
              placeholder="请输入内容"
              v-model="newPassword"
              show-password
            >
            </el-input>
          </div>
        </div>
        <div class="form-group">
          <div class="group-name animate__animated animate__fadeInLeft">确认密码</div>
          <div class="group-input animate__animated animate__fadeInRight">
            <el-input
              style="width: 500px"
              placeholder="请输入内容"
              v-model="secondPassword"
              show-password
            >
            </el-input>
          </div>
        </div>
     
      </div>
      <div class="submit-info">
        <el-button @click="submitPassword" type="primary">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios"
import md5 from "js-md5";
import pubsub from "pubsub-js"
export default {
  name: "ChangePassword",
  data() {
      return {
          userId:this.$store.state.user,
           md5salt: "1a2b3c4c", //加密的盐
           oldPassword:"",//旧密码
           newPassword:"",//新密码
           secondPassword:"",//再次输入密码
      } 
  },
  methods:{
    submitPassword(){
        if(this.oldPassword == null || this.oldPassword == "" || this.oldPassword == "undefined" ||
          this.newPassword == null || this.newPassword == "" || this.newPassword == "undefined" ||
          this.secondPassword == null || this.secondPassword == "" || this.secondPassword == "undefined"
        ){
          this.open4("请输入完整信息")
        }else if(this.newPassword != this.secondPassword){
            this.open4("请保持两次密码输入正确")
        }else{
          //发送请求修改密码
          //旧密码加密
           let old =
          "" +
          this.md5salt.charAt(0) +
          this.md5salt.charAt(2) +
          this.oldPassword +
          this.md5salt.charAt(5) +
          this.md5salt.charAt(4);
        let oldPass = md5(old);
        //新密码加密
                let newp =
          "" +
          this.md5salt.charAt(0) +
          this.md5salt.charAt(2) +
          this.secondPassword +
          this.md5salt.charAt(5) +
          this.md5salt.charAt(4);
        let newPass = md5(newp);

        const that = this;
          axios({
            method:"post",
            url:"/aabbcc/user/userUpdatePassword",
            params:{
              userId:that.userId,
              oldPassword:oldPass,
              newPassword:newPass

            }
          }).then(function(res){
              if(res.data.code == 200){
                 that.open2(res.data.massage)
                 //退出登录
                setTimeout(() => {
                    that.outLogin()
                }, 4000);

              }else if(res.data.code == 421){
                  that.open4(res.data.massage)
              }else{
                   that.open4(res.data.massage)
              }
          })
        }

    },
      outLogin(){
        const that = this;
          axios({
                    method: "post",
                    url: "/aabbcc/user//loginOut",
                    headers: {
                      token: localStorage.getItem("token"),
                    },
                  }).then(function (response) {
                    if (response.data.code == 200) {
                      that.open2("请重新登录")
                    
                  
                      setTimeout(() => {
                          localStorage.removeItem("vuex");
                      localStorage.removeItem("token");
                         //提交修改
                        that.$store.commit("handlerUserId", {
                          userId: 0,
                          userInfo:null

                        });
                        //通知top组件让用户状态为推出
                        pubsub.publish("unlogin",0)
                            that.$router.push({
                              name:"home"
                            })
                        //  location.reload();
                      }, 4000);
                      
                    
                    }else{
                      that.open4(response.data.massage)
                    }
                  });
      },
     open4(message) {
       
       
      //错误提示框
      this.$message({
        showClose: true,
        message: message,
        type: "error",
      });
    },
    open2(message) {
      //成功提示框
      this.$message({
        showClose: true,
        message: message,
        type: "success",
      });
    },
  }
};
</script>

<style scoped>
.change-password {
  width: 96%;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
}
/*头部 */
.info-top-title {
  width: 100%;
  height: 30px;
}
.info-top-title .myInfo {
    color: #333;
  font-size: 25px;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.info-top-title > div {
  cursor: pointer;
  position: relative;
  padding-bottom: 10px;
  border-bottom: 1px solid #cccccc;
}
.info-top-title > div:hover .asd {
  opacity: 1;
  transform: scaleX(1);
  transition: all 0.5s linear;
}
.info-top-title .asd {
  width: 100%;
  border: 1px solid #2882c5;
  /* height: 1px; */
  /* background: red; */
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  transform: scaleX(0);
  transition: all 0.5s linear;
}
/* 我的信息展示 */
.show-user-info {
  width: 100%;
  margin-top: 30px;
}
.form-group {
  display: flex;
  margin-bottom: 20px;
}
.form-group .group-name  {
  width: 8%;
  margin-left: 70px;
  color: #2882c5;
  font-weight: 600;
  font-size: 16px;
  text-align: right;
  line-height: 39px;
}
.form-group .group-input {
  margin-left: 20px;
}
.input-login {
  width: 100%;
}
.submit-info{
       width: 100%;
    height: 71px;
    position: relative;
    /* display: block; */
    top: 20px;

}
.submit-info button{
    position: absolute;
    right: 0;
}
</style>